{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_modify %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">
<style>
    .branch-list {
        margin: 20px 0;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 4px;
    }
    .branch-item {
        padding: 10px;
        margin: 5px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
    }
    .branch-item:hover {
        background: #e9ecef;
    }
    .branch-item.selected {
        background: #007bff;
        color: white;
    }
    .submit-row {
        margin-top: 20px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 4px;
    }
    .submit-row input[type="submit"] {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
</style>
{% endblock %}

{% block content %}
<div id="content-main">
    <form method="post" id="branch-form">
        {% csrf_token %}
        <fieldset class="module aligned">
            <div class="form-row">
                <div>
                    <label>仓库名称：</label>
                    <div>{{ repo.name }}</div>
                </div>
            </div>
            <div class="form-row">
                <div>
                    <label>当前分支：</label>
                    <div>{{ current_branch }}</div>
                </div>
            </div>
        </fieldset>

        <div class="branch-list">
            <h2>选择新分支：</h2>
            {% for branch in branches %}
            <div class="branch-item {% if branch == current_branch %}selected{% endif %}"
                 onclick="selectBranch('{{ branch }}')">
                {{ branch }}
            </div>
            {% endfor %}
            <input type="hidden" name="branch" id="selected-branch" value="{{ current_branch }}">
        </div>

        <div class="submit-row">
            <input type="submit" value="确认修改" class="default">
            <a href="{% url 'admin:grading_repository_changelist' %}" class="button cancel-link">取消</a>
        </div>
    </form>
</div>

<script>
function selectBranch(branch) {
    // 更新选中状态
    document.querySelectorAll('.branch-item').forEach(item => {
        item.classList.remove('selected');
    });
    event.target.classList.add('selected');

    // 更新隐藏输入框的值
    document.getElementById('selected-branch').value = branch;
}
</script>
{% endblock %}
